<template>
  <div class="salePush components-container">
  <el-form :inline="true" :model="pushSearch" class="demo-form-inline">
  
      <el-col :span="20">
        <el-form-item label="汽车品牌">
          <el-input v-model="pushSearch.brandName"  :clearable="true" placeholder="请输入汽车品牌"></el-input>
        </el-form-item>
        <el-form-item label="联系人名称">
           <el-input v-model="pushSearch.contactName"  :clearable="true" clearableplaceholder="请输入联系人名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryPush" size="medium" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="4" style="text-align:right;"><el-button type="primary" size="medium" icon="el-icon-plus" @click="addPushDialog"  v-show="showAdd">新增</el-button></el-col>
    
  </el-form>
   
       <template>
        <el-table
          v-loading="loading"
          :data="tableData"
          class="fns-table"
          border
          style="width: 100%">
          <el-table-column
            prop="brandName"
            align="center"
            label="汽车品牌">
          </el-table-column>
          <el-table-column
            prop="modelName"
            align="center"
            label="型号规格">
          </el-table-column>
         <!--  <el-table-column
           prop="number"
           align="center"
           label="库存总数">
         </el-table-column> -->
          <el-table-column
            prop="contactName"
            align="center"
            label="联系人名称">
          </el-table-column>
          <el-table-column 
            prop="saleMode"
            align="center"
            label="销售方式">
          </el-table-column>
          <el-table-column
            prop="policyArea"
            align="center"
            label="可售省份">
          </el-table-column>
          <el-table-column
            prop="createdOn"
            label="新增日期"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
          label="操作"
          align="center"
          width="80">
          <template slot-scope="scope" >
            <el-tooltip content="删除" placement="top"  v-show="showDelete">
            <a @click="handleDelete(scope.$index, scope.row)">
              <i class="el-icon-delete"></i>
            </a>
          </el-tooltip>
          </template>
        </el-table-column>

         
        </el-table>
      </template>

     <!-- ========页码======-->
    <pages v-on:_pageChange="_pageChange" :total="total"></pages>

      
  </div>
</template>

<script>
    import { Message } from 'element-ui'
    import pages from '../../components/page/page'
    import { findMenu, findSubMenu, findBtn } from '@/utils/btn'
    import * as api from '@/api/system'
    import * as salesApi from '@/api/sales'
    import { mapState } from 'vuex'
    import qs from 'qs'
    export default {
      data() {
        return {
          page: {
            index: 1,
            size: 10
          },
          total: 0,
          loading: false,
          modelTitle: '',
          addOrUpdate: 'add',
          dialogVisible: false,
          pushSearch: {
            brandName: '',
            contactName: ''
          },
          brandList: [],
          modelList: [],
          tableData: []
        }
      },
      created() {
        this.queryPush()
      },
      components: {
        pages
      },
      computed: {
        showAdd() {
          let menu = findMenu('销售管理')
          let subMenu = findSubMenu(menu.children, '推送管理')
          if (findBtn(subMenu.children, '新增')) {
            return true
          } else {
            return false
          }
        },
        showDelete() {
          let menu = findMenu('销售管理')
          let subMenu = findSubMenu(menu.children, '推送管理')
          if (findBtn(subMenu.children, '删除')) {
            return true
          } else {
            return false
          }
        }
      },
      methods: {
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`)
        },
        addPushDialog() {
          this.$router.push({ path: '/salesAddPush' })
        },
        _pageChange(val, flag) {
          var arr = []
          if (flag === 'size') {
            this.page.index = val
            this.queryPush()
          } else {
            arr.push(val)
            this.page.index = 1
            this.page.size = arr[0]
            this.queryPush()
          }
        },
        queryPush() {
          this.loading = true
          var pages = {
            index: this.page.index,
            size: this.page.size
          }
          var data = Object.assign(this.pushSearch, pages)
          salesApi.pushPageList(data).then((res) => {
            if (+res.code === 0) {
              this.tableData = res.data.rows
              this.total = +res.data.total
              this.loading = false
            }
          }).catch(err => {
            console.log(err)
            this.loading = false
          })
        },
        handleDelete(index, rows) {
         this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            salesApi.pushDelete(rows.id).then((res) => {
              if (+res.code === 0) {
                this.queryPush()
                this.$message({
                type: 'success',
                message: '删除成功!'
                });
              }
            })
        })
        },
        handleClose(done) {
          this.dialogVisible = false
        }
      }
    }
  </script>
<style  lang="scss">
  .salePush {
    position: relative;
    padding: 20px;
    .el-dialog {
      height: 80%;
      min-width: 1000px;
      .el-form-item__content {
        margin-left: 110px;
        }
        .pushMain {
          min-height: 685px;
          overflow-y: auto;
        }
        .dialog-footer2 {
          position: absolute;
          bottom: 20px;
          left: 42%;
        }
        .policyMain {
          position: relative;
          .policyLeft {
            float: left;
            display: inline-block;
          }
          .policyTitle {
            font-size: 16px;
            font-weight: bold;
            }
          .policySearch {
            height: 40px;
          }
          .inOrOut {
            float: left;
            display: inline-block;
            position: absolute;
            text-align: center;
            line-height: 50px;
            top: 35%;
          }
          .policyRight {
            float: right;
            display: inline-block;
          }
        }
        .push_line{
          height: 30px;
          border-bottom: 1px solid #ddd;
          text-align: center;
        }
        .agentMain {
          position: relative;
          top: 15px;
          .agentLeft {
            float: left;
            display: inline-block;
          }
          .agentTitle {
            font-size: 16px;
            font-weight: bold;
            }
          .agentSearch {
            height: 40px;
          }
          .inOrOut {
            float: left;
            display: inline-block;
            position: absolute;
            text-align: center;
            line-height: 50px;
            top: 35%;
          }
          .agentRight {
            float: right;
            display: inline-block;
          }
        }
    }
    .modalCheckBox {
        .el-checkbox-group {
          line-height: 18px;
          margin-left: 20px;
          margin-top: -5px;
          .el-checkbox {
            .el-checkbox__label {
              font-size: 12px;
              color: #666;
            }
          }
        }
        .el-checkbox {
          margin-right: 20px;
        }
        .el-checkbox + .el-checkbox {
          margin-left: 0;
        }
      }
    }

  .left-container {
    background-color: #F38181;
    height: 100%;
  }

  .right-container {
    background-color: #FCE38A;
    height: 200px;
  }

  .top-container {
    background-color: #FCE38A;
    width: 100%;
    height: 100%;
  }

  .bottom-container {
    width: 100%;
    background-color: #95E1D3;
    height: 100%;
  }
</style>
